<template>
  <div id="login-background">
    
    <transition name="slide-fade">
      <el-card v-if="showCard" class="set-card" width="30px">
        <!-- <h3 class="set-h2">登&nbsp;录</h3> -->
        <img :src="require('@/assets/FoodoirLogo.png')" style="width:200px;" />
        <el-form :model="loginForm" :rules="rules" ref="loginForm">

          <el-form-item label="" prop="username">
            <el-row>
              <el-col :span="4"><img src="../../assets/user.png" style="width:40px;" /></el-col>
              <el-col :span="20">
                <el-input class="set-input" type="text" v-model="loginForm.username" placeholder="请输入用户名">
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="" prop="password">
            <el-row>
              <el-col :span="4"><img src="../../assets/paw.png" style="width:40px;" /></el-col>
              <el-col :span="20">
                <el-input class="set-input" type="password" v-model="loginForm.password" placeholder="请输入密码">
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-button class="set-button" icon="el-icon-s-promotion" type="warning" v-on:click="login" plain round>
              登&nbsp;&nbsp;录
            </el-button>
            <p class="set-p">还有没有账号？立刻注册</p>
          </el-form-item>

        </el-form>
      </el-card>
    </transition>
  </div>
</template>

<script>
  import {
    loginAccount
  } from '@/api/accountApi.js';

  export default {
    name: 'Login',
    data() {
      return {
        showCard: false,
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [{
            required: true,
            message: ' ',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: ' ',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      login() {
        if (this.loginForm.username === '' || this.loginForm.password == '') {
          if (this.loginForm.username === '') {
            this.$message({
              message: '账号不可为空！！请填写下(๑• . •๑)',
              type: 'warning'
            });
            return;
          }
          if (this.loginForm.password == '') {
            this.$message({
              message: '密码不可为空！！请填写下(๑• . •๑)',
              type: 'warning'
            });
            return;
          }
        } else {
          loginAccount(this.loginForm.username, this.loginForm.password).then(resp => {
            if (400 == resp.data) {
              this.$message.error('用户名或密码错误 _(´ཀ`」 ∠)_');
            } else {
              this.$store.commit('login', {
                userId: resp.data,
                username: this.loginForm.username
              });
              let userid = this.$store.state.user.userId
              this.$store.dispatch('getUserInfo', userid)
              this.$router.replace('/share')
              // var path = this.$route.query.redirect
              //   this.$router.replace({
              //     path: path === '/' || path === undefined ? '/share' : path
              //   })
            }
          })
        }
      }
    },
    mounted() {
      this.showCard = true;
    },
  }
</script>

<style scoped>
  #login-background {
    background: url("../../assets/login-bj.jpeg") no-repeat;
    background-position: center;
    height: 800px;
    width: 100%;
    background-size: cover;
    position: absolute;
  }

  .set-card {
    width: 35%;
    float: right;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 120px;
    background-color: rgb(255, 255, 255, 0.5);
    border-radius: 15px;
  }

  .set-h2 {
    font-family: "PingFang SC";
    text-align: left;
    ;
  }

  .set-input {
    width: 100%;
  }

  .set-button {
    float: right;
    width: 95%;
    /* margin-top:0px */
  }

  .set-p {
    font-size: 13px;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(2, 154, 255)
  }

  .set-p:hover {
    font-size: 13px;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgb(87, 188, 255)
  }

  .slide-fade-enter-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter,
  .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
    {
    transform: translateY(20px);
    opacity: 0;
  }
</style>

<style>
  .set-input .el-input__inner {
    font-family: "Microsoft" !important;
    font-size: 16px !important;
    font-weight: 700;
    height: 50px;
  }
</style>